<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker v-model="pickerDate" :editable="false" :clearable="false" value-format="yyyy.MM.dd"
                        type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions" @change="dateChange"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table  highlight-current-row show-summary :data="list" size="small" v-loading.body="listLoading" border>
                <el-table-column align="center" prop="store_name" label="门店"></el-table-column>
                <el-table-column align="center" prop="date_create" label="时间"></el-table-column>
                <el-table-column align="center" prop="coins" label="消费币数"> </el-table-column>
                <el-table-column align="center" prop="area" label="消费区域"> </el-table-column>
                <!-- <el-table-column v-if="type==1" align="center" label="消费区域">
                    <template slot-scope="scope">
                        {{scope.row.area_name}}-{{scope.row.project_name}}-{{scope.row.no}}
                    </template>
                </el-table-column>
                <el-table-column v-else-if="type==2" align="center" label="消费区域">
                    <template slot-scope="scope">
                        {{scope.row.business_name}}
                    </template>
                </el-table-column>
                <el-table-column v-else align="center" label="消费区域">
                    <template slot-scope="scope">
                        {{scope.row.area_name}}-提币机-{{scope.row.no}}/{{scope.row.cid}}
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="20" layout="prev, pager, next, jumper" :total="totalDataNumber">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import { expense_coins_page, expense_coins_list, business_coins_list, get_coins_list } from "@/api/member/vip_detail_query";
    import { pickerOptionsF, pickerDateF, optionMaxTime, today } from '@/utils';
    export default {
        data() {
            return {
                list: [],
                listLoading: false,
                currentPage: 1,
                totalDataNumber: 0,
                type:1,
                formInline: {},
                pickerOptions: pickerOptionsF(),
                pickerDate: null
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                vm.beforeComingIn();
            })
        },
        methods: {
            beforeComingIn() {
                if (this.$route.query.routerflag) {
                    this.formInline.store_id = this.$route.params.store_id;
                    this.formInline.vip_id = this.$route.params.vip_id;
                    this.type = this.$route.params.type;
                    //console.log(this.$route.params,this.formInline,this.type)
                    this.pickerDate = ['1970.01.01', today];
                        this.searchClick();
                }
            },
            dateChange() {
                this.searchClick();
            },
            // 搜索
            searchClick() {
                if (!this.formInline.store_id) {
                    this.$message({ type: 'error', message: '筛选条件已失效，请关闭此页面，重新跳转' });
                    return;
                }
                this.formInline.begin_time = this.pickerDate[0]
                this.formInline.end_time = this.pickerDate[1]
                this.fetchPage();
            },
            // 获取分页
            fetchPage() {
                this.listLoading = true;
                if(this.type==1){
                    expense_coins_page(this.formInline).then(response => {
                        this.totalDataNumber = response * 20;
                        this.fetchData();
                    })
                }else{
                    this.fetchData();
                }
            },
            // 分页
            handleCurrentChange(val) {
                this.fetchData(val);
            },
            fetchData(val = '') {//es6默认值
                this.listLoading = true;
                if(this.type==1){
                    expense_coins_list(this.formInline, val).then(response => {
                        response.forEach(val=>{
                            val.area=val.area_name+" - "+val.project_name+" - "+val.no
                        })
                        this.list = response;
                        this.listLoading = false;
                    }).catch(err => {
                        this.listLoading = false;
                    })
                }else if(this.type==2){
                    business_coins_list({vip_id:this.formInline.vip_id,start_time:this.formInline.begin_time.replace(/\./g, '-'),end_time:this.formInline.end_time.replace(/\./g, '-'),page:val?val:0,}).then(res => {
                        if(res.code==1){
                            this.totalDataNumber=res.message.page_total/1;
                            res.message.list.forEach(val=>{
                                val.date_create=val.create_time;
                                val.coins=val.total_coins;
                                val.area=val.business_name;
                            })
                            this.list=res.message.list;
                        }
                        this.listLoading = false;
                    }).catch(res=>{
                        this.listLoading=false;
                    })                 
                }else{
                    get_coins_list({vip_id:this.formInline.vip_id,start_time:this.formInline.begin_time.replace(/\./g, '-'),end_time:this.formInline.end_time.replace(/\./g, '-'),page:val?val:0,}).then(res => {
                        if(res.code==1){
                            this.totalDataNumber=res.message.page_total/1;
                            res.message.list.forEach(val=>{
                                val.date_create=val.create_time;
                                val.area=val.area_name+" - 提币机 - "+val.no+"/"+val.cid
                            })
                            this.list=res.message.list;
                        }
                        this.listLoading = false;
                    }).catch(res=>{
                        this.listLoading=false;
                    })                    
                }
            }
        }
    }
</script>